<template>
    <div>
        <a-form :form="form"  @submit="handleSearch">
            <a-row :gutter="24">
                <a-col :md="8" :sm="8">
                    <a-form-item
                            label="选择公司："
                            v-if="haveCompany"
                            :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
                            :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
                        <a-select
                                show-search
                                placeholder="请选择公司"
                                option-filter-prop="children"
                                :labelInValue="true"
                                :filter-option="filterOption"
                                @change="handleChangeCompany"
                                v-decorator="[ `companyName` ]">
                            <a-select-option v-for="(item, index) in company" :value="item.orgId" :key="index">
                                {{item.orgName}}
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :md="8" :sm="8">
                    <a-form-item
                            label="选择项目："
                            :labelCol="{ lg: { span: 5 }, sm: { span: 5 } }"
                            :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }">
                        <a-select
                                show-search
                                placeholder="请选择项目"
                                option-filter-prop="children"
                                :labelInValue="true"
                                :filter-option="filterOption"
                                @change="handleChangeProject"
                                v-decorator="[ `projectName` ]">
                        <a-select-option v-for="(item, index) in project" :value="item.code" :key="index">
                                {{item.name}}
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :md="8" :sm="8">
                    <a-button type="primary" html-type="submit">搜索</a-button>
                    <a-button style="margin-left: 8px" @click="handleReset">重置</a-button>
                    <slot name="suffix" />
                </a-col>
            </a-row>
        </a-form>
    </div>
</template>

<script>
  import Vue from 'vue'
  import { getCompany, getProject } from '@/api/themeChoose/themeChoose'
  export default {
    name: 'ThemeChoose',
    props:{
      haveCompany:{
        type: Boolean,
        default: true
      },
    },
    data(){
      return{
        form: this.$form.createForm(this, { name: 'selectForm' }),
        company:[],
        project:[],
        companyName:'',
        projectName:''
      }
    },
    created(){
      const userInfo = Vue.getAcloudProvider().getUserInfo()
      this.getCompanyList({orgIds:[userInfo.orgId], tagCodes:['BC']})
    },
    methods: {
      getCompanyList(params){
        getCompany(params).then(res => {
          if(res.status === 200){
            const data = res.data;
            this.company = res.data;
            const ordIdArray=[];
            data.map(function(item) {
              ordIdArray.push(item.orgId)
            })
            this.getProjectList({query:{branchComIds:ordIdArray}})
          }else {
            this.$message.error('err:', res.statusText);
          }
        })
      },
      getProjectList(params){
        getProject(params).then(res => {
          if(res.code === 200){
            this.project = res.data;
            this.$emit('getProjectList',this.project);
          }else {
            this.$message.error('err:', res.message)
          }
        })
      },
      handleChangeCompany(params) {
        this.companyName=params.label
        this.getProjectList({query:{branchComIds:[params.key]}})
      },
      handleChangeProject(params) {
        this.projectName=params.key
      },
      handleSearch(e){
        e.preventDefault();
        this.$emit('getThemes', {companyName:this.companyName, projectName:this.projectName})
      },
      handleReset(){
        this.form.resetFields();
        this.$emit('getThemes', {companyName:this.companyName, projectName:this.projectName})
      },
      filterOption(input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      },
    },
  }
</script>
